
// pages/sign/sign.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    headerStyleHeight: 0,
    headerStyleTop: 0,
    oc: "",
    points: [], //路径点集合
    showCanvas: false, //
    show: true,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.initCanvas();
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  },
  close() {
    wx.canvasToTempFilePath({
      canvasId: "mycanvas",
      success: (res) => {
        console.log("res", res.tempFilePath);
        const canvas = res.tempFilePath;
        wx.navigateTo({
          url: `/pages/contract/contract?hasSingle=${1}&canvas=${canvas}`,
        });
      },
    });
  },

    initCanvas() {
      this.setData ({
        showCanvas : true
      })
      this.oc = wx.createCanvasContext("mycanvas");
      //设置画笔样式
      this.oc.lineWidth = 4;
      this.oc.lineCap = "round";
      this.oc.lineJoin = "round";
      this.oc.strokeStyle = "black";
      this.oc.fillStyle = "#fff";
      this.oc.lineWidth = 5;
      this.oc.fillRect(0, 0, 400, 700);
      this.oc.fill();
      this.oc.draw();
    },
    ontouchend(e) {
      console.log("结束啊啊啊啊");
      oc.ontouchmove = null;
      this.show = false;
    },
    ontouchmove(e) {
      const { clientX, clientY } = e.changedTouches[0];
      oc.lineTo(clientX - oc.offsetLeft, clientY - oc.offsetTop);
      oc.stroke();
    },
    //触摸开始，获取到起点

    ontouchstart(e) {
      // debugger
      //   ctx.beginPath();
      const startX = e.changedTouches[0].x;
      const startY = e.changedTouches[0].y;

      let startPoint = {
        X: startX,
        Y: startY,
      };
      this.data.points.push(startPoint);
      //每次触摸开始，开启新的路径
      this.oc.beginPath();
    },
    //触摸移动，获取到路径点
    touchmove(e) {
      let moveX = e.changedTouches[0].x;
      let moveY = e.changedTouches[0].y;
      let movePoint = {
        X: moveX,
        Y: moveY,
      };
      this.data.points.push(movePoint); //存点
      let len = this.data.points.length;
      if (len >= 2) {
        this.draw(); //绘制路径
      }
    },

    // 触摸结束，将未绘制的点清空防止对后续路径产生干扰
    touchend() {
      this.setData({
        points :[],
        show :false
      })
    },

    /* ***********************************************
                                                                                                                #   绘制笔迹
                                                                                                                #   1.为保证笔迹实时显示，必须在移动的同时绘制笔迹
                                                                                                                #   2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)
                                                                                                                #   3.将上一次的终点作为下一次绘制的起点（即清除第一个点）
                                                                                                                ************************************************ */
    draw() {
      let point1 = this.data.points[0];
      let point2 = this.data.points[1];
      this.data.points.shift();
      this.oc.moveTo(point1.X, point1.Y);
      this.oc.lineTo(point2.X, point2.Y);
      this.oc.stroke();
      this.oc.draw(true);
    },
    //清空画布
    clear() {
      this.show = true;
      let that = this;
      that.setData({
        show:true
      })
      wx.getSystemInfo({
        success: (res) => {
          let canvasw = res.windowWidth;
          let canvash = res.windowHeight;
          that.oc.clearRect(0, 0, canvasw, canvash);
          that.oc.draw(true);
          //   that.initCanvas();
        },
      });
    },
})